<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手市场 - 我的购买</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #66BB6A;
            --light-gray: #F5F5F5;
            --text-color: #212121;
            --sub-text: #757575;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--light-gray);
            min-height: 100vh;
            padding-bottom: 60px;
            position: relative;
        }

        .header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem;
            text-align: center;
        }

        .content {
            flex: 1;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
        }

        .purchase-list {
            background-color: #fff;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .purchase-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .purchase-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 1rem;
            position: relative;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .purchase-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .purchase-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }

        .purchase-status {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--primary-color);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.8rem;
        }

        .purchase-card h3 {
            margin-bottom: 0.5rem;
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .purchase-card p {
            color: var(--sub-text);
            margin-bottom: 0.5rem;
            font-size: 0.8rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .purchase-card .price {
            font-weight: bold;
            color: #e74c3c;
            font-size: 1.1rem;
        }

        .purchase-card .date {
            font-size: 0.7rem;
            color: #95a5a6;
            margin-top: 0.3rem;
        }

        .contact-seller {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 0.5rem;
            border-radius: 4px;
            width: 100%;
            margin-top: 0.5rem;
            cursor: pointer;
        }

        .contact-seller:hover {
            background-color: #0b7dda;
        }

        .nav-bar {
            display: flex;
            justify-content: space-around;
            background-color: #fff;
            padding: 0.5rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            margin: 0 auto;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 12px 12px 0 0;
            z-index: 102;
        }

        .nav-bar a {
            color: var(--sub-text);
            text-decoration: none;
            padding: 0.5rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.8rem;
            transition: color 0.3s;
            position: relative;
        }

        .nav-bar a.active {
            color: var(--primary-color);
        }

        .nav-bar a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px;
        }

        .nav-icon {
            width: 24px;
            height: 24px;
            position: relative;
            margin-bottom: 0.2rem;
        }

        .home-icon::before {
            content: "🏠";
        }

        .products-icon::before {
            content: "📦";
        }

        .publish-icon::before {
            content: "✏️";
        }

        .news-icon::before {
            content: "💬";
        }

        .account-icon::before {
            content: "👤";
        }

        .empty-purchases {
            text-align: center;
            padding: 2rem;
            color: var(--sub-text);
        }

        .empty-purchases-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
    </style>
</head>

<body>
    <header class="header">
        <h1>校园二手市场</h1>
    </header>

    <div class="content">
        <main class="container">
            <section class="purchase-list">
                <h2>我的购买记录</h2>
                <div id="purchases-list" class="purchase-grid">
                    <!-- 购买记录将通过JavaScript动态加载 -->
                </div>
            </section>
        </main>
    </div>

    <nav class="nav-bar">
        <a href="index.html">
            <div class="nav-icon home-icon"></div>
            首页
        </a>
        <a href="products.html">
            <div class="nav-icon products-icon"></div>
            商品
        </a>
        <a href="publish.html">
            <div class="nav-icon publish-icon"></div>
            发布
        </a>
        <a href="news.html">
            <div class="nav-icon news-icon"></div>
            消息
        </a>
        <a href="account.html" class="active">
            <div class="nav-icon account-icon"></div>
            我的
        </a>
    </nav>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if (!currentUser) {
                window.location.href = 'login.html';
                return;
            }

            const purchasesList = document.getElementById('purchases-list');

            function getProducts() {
                let products = JSON.parse(localStorage.getItem('products'));
                if (!products || products.length === 0) {
                    products = [
                        { id: 1, title: '全新未拆封考研英语真题', description: '全新未拆封2023考研英语真题详解，包含近10年真题及详细解析。', price: 35, image: '图片/全新未拆封考研英语真题.jpg', category: 'books', date: '2023-05-10', userId: 1, userName: '张同学' },
                        { id: 2, title: '九成新自行车', description: '九成新自行车，适合校园内使用。', price: 150, image: '图片/自行车.jpg', category: 'transportation', date: '2023-05-12', userId: 2, userName: '李同学' },
                        { id: 3, title: '电子书阅读器', description: '电子书阅读器，几乎全新，附带保护套。', price: 200, image: '图片/电子阅读器.jpg', category: 'electronics', date: '2023-05-15', userId: 3, userName: '王同学' },
                        { id: 4, title: '宿舍用小冰箱', description: '宿舍用小冰箱，功能正常，适合存放饮料和零食。', price: 100, image: '图片/宿舍小冰箱.jpg', category: 'appliances', date: '2023-05-18', userId: 1, userName: '张同学' },
                        { id: 5, title: '宿舍用台灯', description: '宿舍用台灯，可调节亮度。', price: 30, image: '图片/宿舍用台灯.jpg', category: 'living', date: '2023-05-20', userId: 4, userName: '赵同学' },
                        { id: 6, title: '无线耳机', description: '无线蓝牙耳机，音质清晰，适合学习和娱乐。', price: 120, image: '图片/无线耳机.jpg', category: 'electronics', date: '2023-05-22', userId: 2, userName: '李同学' },
                        { id: 7, title: '折叠桌椅', description: '便携式折叠桌椅，适合户外活动和宿舍使用。', price: 80, image: '图片/折叠桌椅.jpg', category: 'living', date: '2023-05-25', userId: 5, userName: '刘同学' },
                        { id: 8, title: '背包', description: '多功能背包，适合日常使用和旅行。', price: 60, image: '图片/背包.jpg', category: 'living', date: '2023-05-28', userId: 3, userName: '王同学' },
                        { id: 9, title: '篮球', description: '标准篮球，适合校园篮球比赛和训练。', price: 45, image: '图片/篮球.jpg', category: 'transportation', date: '2023-06-01', userId: 4, userName: '赵同学' },
                        { id: 10, title: '笔记本电脑', description: '高性能笔记本电脑，适合学习和编程。', price: 2500, image: '图片/笔记本电脑.jpg', category: 'electronics', date: '2023-06-03', userId: 1, userName: '张同学' },
                        { id: 11, title: '智能手表', description: '智能手表，支持健康监测和通知提醒。', price: 180, image: '图片/智能手表.jpg', category: 'electronics', date: '2023-06-05', userId: 5, userName: '刘同学' },
                        { id: 12, title: '滑板', description: '初学者滑板，适合校园内短途出行。', price: 90, image: '图片/滑板.jpg', category: 'transportation', date: '2023-06-08', userId: 2, userName: '李同学' },
                        { id: 13, title: '水壶', description: '不锈钢水壶，保温效果好，适合日常使用。', price: 25, image: '图片/水壶.jpg', category: 'living', date: '2023-06-10', userId: 3, userName: '王同学' },
                        { id: 14, title: '绘画工具', description: '专业绘画工具，适合艺术学习和创作。', price: 75, image: '图片/绘画工具.jpg', category: 'books', date: '2023-06-12', userId: 4, userName: '赵同学' },
                        { id: 15, title: '耳机支架', description: '耳机支架，帮助整理桌面空间。', price: 15, image: '图片/耳机支架.jpg', category: 'living', date: '2023-06-15', userId: 5, userName: '刘同学' }
                    ];
                    localStorage.setItem('products', JSON.stringify(products));
                }
                return products;
            }

            function getPurchases() {
                const purchases = JSON.parse(localStorage.getItem('purchases')) || {};
                return purchases[currentUser.id] || [];
            }

            function formatDate(dateString) {
                const date = new Date(dateString);
                return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
            }

            function renderPurchases() {
                const products = getProducts();
                const purchases = getPurchases();

                purchasesList.innerHTML = '';

                if (purchases.length === 0) {
                    purchasesList.innerHTML = `
                        <div class="empty-purchases">
                            <div class="empty-purchases-icon">🛒</div>
                            <h3>您还没有购买过任何商品</h3>
                            <p>快去发现心仪的二手宝贝吧！</p>
                        </div>
                    `;
                    return;
                }

                const validPurchases = purchases.filter(purchase => 
                    typeof purchase === 'object' && purchase.productId
                );

                const purchasedProducts = products.filter(product => 
                    validPurchases.some(p => p.productId === product.id)
                );

                purchasedProducts.sort((a, b) => {
                    const aPurchase = validPurchases.find(p => p.productId === a.id);
                    const bPurchase = validPurchases.find(p => p.productId === b.id);
                    return new Date(bPurchase.date) - new Date(aPurchase.date);
                });

                purchasedProducts.forEach(product => {
                    const purchase = validPurchases.find(p => p.productId === product.id);
                    const productCard = document.createElement('div');
                    productCard.className = 'purchase-card';

                    const today = new Date();
                    const productDate = new Date(product.date);
                    const diffInHours = Math.floor((today - productDate) / (1000 * 60 * 60));

                    productCard.innerHTML = `
                        <div class="purchase-status">已完成</div>
                        <img src="${product.image}" alt="${product.title}" class="purchase-image">
                        <h3>${product.title}</h3>
                        <p>${product.description}</p>
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <span class="price">¥${product.price}</span>
                            ${diffInHours <= 24 ? '<span class="new-badge">新</span>' : ''}
                        </div>
                        <p class="date">购买日期: ${formatDate(purchase.date)}</p>
                        <p class="date">卖家: ${product.userName}</p>
                        <button class="contact-seller" data-seller-id="${product.userId}">联系卖家</button>
                    `;
                    purchasesList.appendChild(productCard);
                });

                document.querySelectorAll('.contact-seller').forEach(button => {
                    button.addEventListener('click', function() {
                        const sellerId = this.getAttribute('data-seller-id');
                        alert('功能开发中：将跳转到聊天页面与卖家联系');
                    });
                });
            }

            renderPurchases();
        });
    </script>
</body>
</html>